<template>
  <div>
    <page-banner></page-banner>
    <page-breadcrumbs :crumbData="crumbData"></page-breadcrumbs>
    <div class="title-box">
      <div class="title font-24">加入我们</div>
      <span class="border-bottom"></span>
    </div>

    <div class="job-box">
      <div class="job-name-box" @click="jobHandleClick">
        <div class="job-name font-16">网易考拉旗舰店运营</div>
        <div class="job-salary">
          <span class="iconfont">&#xe603;</span>
          <span class="font-12">8k-10k</span>
        </div>
      </div>
      <div class="job-requirement-box font-12">
        <p>任职要求：</p>
        <p>大专以上学历/熟悉电商营销工具及规则/沟通合作能力强/具备独立运营</p>
      </div>
      <common-fade>
        <div class="job-duty-box" v-if="dutyShow">
          工作内容：
          1、了解天猫、京东等电商平台售前、售后流程；
          2、和善沟通、促成交易；
          3、处理客户反馈的快递问题，如催件、查件、签收异常、丢失件和拒收件等；
          4、处理客户反馈的收货之后的售后问题，如发错货、发少货、包装破损问题、赠品问题、以及质量问题等等；
          5、负责解决交易顾客投诉及不满，以良好的心态，及时处理退换货、中差评、投诉等，维护店铺DSR得分；
          6、做好顾客的安抚工作，如通过有效解决客户问题，建立良好的公司形象；
          7、协助小组和客服主管完成其他相关工作。
        </div>
      </common-fade>
    </div>

    <div class="job-box">
      <div class="job-name-box">
        <div class="job-name font-16">网易考拉旗舰店运营</div>
        <div class="job-salary">
          <span class="iconfont">&#xe603;</span>
          <span class="font-12">8k-10k</span>
        </div>
      </div>
      <div class="job-requirement-box font-12">
        <p>任职要求：</p>
        <p>大专以上学历/熟悉电商营销工具及规则/沟通合作能力强/具备独立运营</p>
      </div>
      <div class="job-duty-box">
        工作内容：
        1、了解天猫、京东等电商平台售前、售后流程；
        2、和善沟通、促成交易；
        3、处理客户反馈的快递问题，如催件、查件、签收异常、丢失件和拒收件等；
        4、处理客户反馈的收货之后的售后问题，如发错货、发少货、包装破损问题、赠品问题、以及质量问题等等；
        5、负责解决交易顾客投诉及不满，以良好的心态，及时处理退换货、中差评、投诉等，维护店铺DSR得分；
        6、做好顾客的安抚工作，如通过有效解决客户问题，建立良好的公司形象；
        7、协助小组和客服主管完成其他相关工作。
      </div>
    </div>
    <page-footer></page-footer>
  </div>
</template>

<script>
import PageBanner from 'components/Banner'
import PageBreadcrumbs from 'components/Breadcrumbs'
import PageFooter from 'components/Footer'
import CommonFade from 'components/Slide'
export default {
  name: 'Join',
  components: {
    PageBanner,
    PageBreadcrumbs,
    PageFooter,
    CommonFade
  },
  data () {
    return {
      crumbData: [{
        title: '首页', jump: '/'
      }, {
        title: '关于我们', jump: ''
      }, {
        title: '加入我们', jump: '/join'
      }],
      dutyShow: false
    }
  },
  methods: {
    jobHandleClick () {
      this.dutyShow = !this.dutyShow
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import "~common/stylus/variable.styl"
  .title-box
    margin-top 1rem
    display flex
    flex-direction column
    align-items center
    .font-24
      color $color-blue
    .border-bottom
      padding-top .24rem
      width .32rem
      border-bottom 0.08rem solid $color-blue
  .job-box
    width 90%
    padding-top .24rem
    margin .5rem auto
    border-radius .24rem
    background-color #f8f8f8
    box-shadow 2px 2px 5px 5px #eee
    .job-name-box
      width 90%
      margin .24rem auto
      display flex
      flex-direction row
      justify-content space-between
      .job-name
        color $color-blue
      .job-salary
        color $color-blue
        .font-12
          margin-left .24rem
    .job-requirement-box
      padding .24rem
      line-height .4rem
    .job-duty-box
      padding .24rem
      background-color $color-blue-second
      color #fff
      border-bottom-left-radius .24rem
      border-bottom-right-radius .24rem
</style>
